<template>
  <view class="container">
    <!-- 顶部图片区域 -->
    <view class="img-container">
      <image 
        src="/static/bind_wristband.png" 
        mode="widthFix" 
        class="guide-img"
      ></image>
    </view>

    <!-- 标题 -->
    <view class="title">扫码绑定手环</view>

    <!-- 进度展示 -->
    <view class="progress-container">
      <view class="progress-number">2/5</view>
      <view class="progress-text">已绑定</view>
    </view>

    <!-- 扫码按钮 -->
    <button class="scan-btn" @click="startScan">
      扫一扫
    </button>

    <!-- 扫码结果提示 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <text class="popup-text">{{ scanResult }}</text>
        <button class="popup-btn" @click="closePopup">确认</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scanResult: '', // 扫码结果
      totalCount: 5, // 总可绑定数量
      currentCount: 2 // 当前已绑定数量
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.bindWristband')
  	});
  },
  methods: {
    // 开始扫码
    startScan() {
      // 调用UniApp扫码API
      uni.scanCode({
        onlyFromCamera: true, // 只允许相机扫码
        scanType: ['qrCode'], // 只识别二维码
        success: (res) => {
          this.scanResult = `手环绑定成功\nID: ${res.result}`;
          // 更新绑定数量
          this.currentCount = Math.min(this.currentCount + 1, this.totalCount);
          // 显示结果弹窗
          this.$refs.popup.open();
        },
        fail: (err) => {
          uni.showToast({
            title: '扫码失败，请重试',
            icon: 'none'
          });
          console.error('扫码失败:', err);
        }
      });
    },
    // 关闭弹窗
    closePopup() {
      this.$refs.popup.close();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
  background-color: #f9f9f9;
}

.img-container {
  width: 100%;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
}

.guide-img {
  width: 100%;
  border-radius: 16rpx;
}

.title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 80rpx;
  font-weight: 500;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100rpx;
}

.progress-number {
  font-size: 80rpx;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.progress-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 16rpx;
}

.scan-btn {
  width: 80%;
  height: 90rpx;
  background-color: #ff5722;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  line-height: 90rpx;
}

/* 弹窗样式 */
.popup-content {
  width: 600rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-text {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 40rpx;
  text-align: center;
  line-height: 1.5;
}

.popup-btn {
  width: 200rpx;
  height: 70rpx;
  background-color: #ff5722;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
  line-height: 70rpx;
}
</style>